<template>
    <el-card shadow="never">
        <div slot="header" class="clearfix">
            <span>{{topic.id ? '编辑话题': '新建话题'}}</span>
        </div>
        <el-form :model="topic" ref="form">
            <el-form-item prop="name" :rules="[{required:true,message:'请输入话题名称'}]">
                <el-input placeholder="话题名称，例如'天马行空'" v-model="topic.name" />
            </el-form-item>
            <el-form-item prop="partitionId" :rules="[{required:true,message:'请选择归属分区'}]">
                <partition-selection width="100%" v-model="topic.partitionId" placeholder="归属分区"></partition-selection>
            </el-form-item>
            <el-form-item prop="sort">
                <el-input placeholder="排序权重（数字越大排序越靠前，默认99）" v-model="topic.sort" />
            </el-form-item>
            <el-form-item prop="description">
                <el-input type="textarea" v-model="topic.description" placeholder="描述"></el-input>
            </el-form-item>
            <el-form-item prop="isOnline">
                <el-checkbox v-model="topic.isOnline">是否上线(生效)</el-checkbox>
            </el-form-item>
        </el-form>
        <div class="card-footer">
            <div class="pull-right">
                <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
                <submit-button @click="submit" :loading="submiting">保存</submit-button>
            </div>
        </div>
    </el-card>
</template>

<script>
import Vue from "vue";
import { createTopic, updateTopic } from "@/api/dicts/topic";
import { SubmitButton } from "@/components/aws-comp/index";
import PartitionSelection from "../partition/selection.vue";
import CreateModel from "./CreateModel";

Vue.component(SubmitButton.name, SubmitButton);
Vue.component(PartitionSelection.name, PartitionSelection);



export default {
    name: "client-create",
    data() {
        return {
            filename: __filename,
            /**请求接口返回 */
            submiting: false
        };
    },
    components: {},
    props: {
        topic: {
            type: Object,
            default: function() {
                return new CreateModel();
            }
        }
    },
    model: { prop: "topic", event: "saved" },
    methods: {
        submit: function() {
            var vm = this;
            this.$refs["form"].validate(valid => {
                if (valid) vm.doSubmit();
            });
        },
        doSubmit: function() {
            var vm = this;
            var method = this.topic.id ? updateTopic : createTopic;
            this.submiting = true;
            method(this.topic)
                .then(() => {
                    vm.submiting = false;
                    vm.$emit("saved", vm.topic);
                    vm.resetForm();
                })
                .catch(() => {
                    vm.submiting = false;
                });
        },
        resetForm() {
            this.topic = new CreateModel();
            this.$refs["form"].resetFields();
        }
    }
};
</script>
<style scoped>
.card-footer {
    border-top: 1px solid #ebeef5;
    padding: 10px 20px 0 20px;
    margin: 0 -20px -10px -20px;
    overflow: hidden;
}
</style>

